<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <div th:replace="m/head :: head"></div>

    <title>参展赛事</title>
</head>

<body>

<div th:replace="m/head :: body('', 'head-with-menu', '')"></div>

<!--主体内容-->
<div class="private-navwrap">
    <div class="private-nav clearfix">
        <div class="left on">最受欢迎演出音乐投票</div>
        <div class="right">最受欢迎戏剧作品投票</div>
    </div>
</div>
<div class="contentwrap private-content">
    <div class="city-choice clearfix">
        <div class="right">
            <div class="input clearfix"><em>请选择所在城市</em> <span>▾</span></div>
            <ul>
                <li th:each="item, index:${areas}" th:text="${item.name}" th:value="${item.id}"></li>
            </ul>
        </div>
    </div>
    <div class="content-box team-box private-box director-box">
        <div class="con clearfix" id="photo-grapher-list-wrap">
            <dl th:each="item, index:${photographers.list}">
                <div>
                    <dt>
                        <a th:href="@{'/user/detail/' + ${item.id}}" target="_blank">
                            <img th:src="${#request.getAttribute('uploadServer') + item.portrait}"/>
                        </a>
                    </dt>
                    <dd>
                        <a th:href="@{'/user/detail/' + ${item.id}}" target="_blank">
                            <h3 th:attr="data-user-id=${item.id}" th:text="${item.nickname}"></h3>
                            <div class="star">
                                <em></em>
                                <em></em>
                                <em></em>
                                <em></em>
                                <em></em>
                            </div>
                            <p th:text="${item.description}"></p>
                            <p th:if="${item.description.length() < 14}">&nbsp;</p>
                        </a>
                        <div class="bottom">
                            <div th:class="${item.collectUserCollect gt 0 ? 'icon on' : 'icon'}">
                                <i class="iconfont icon-zanxinxingguanzhu operations-collect" th:attr="data-collect-id=${item.id}" data-collect-type="1" data-collect-operation="2"></i>
                                <span th:text="${item.collectCount}"></span>
                            </div>
                            <div th:class="${item.collectUserLike gt 0 ? 'icon on' : 'icon'}">
                                <i class="iconfont icon-dianzan operations-collect" th:attr="data-collect-id=${item.id}" data-collect-type="1" data-collect-operation="1"></i>
                                <span th:text="${item.likeCount}"></span>
                            </div>
                            <div class="xuanze">
                                <i></i>
                            </div>
                        </div>
                    </dd>
                </div>
            </dl>
        </div>

        <!--分页-->
        <div class="pagewrap">
            <div id="photo-grapher-page-wrap">

            </div>
        </div>
    </div>
</div>

<div class="contentwrap private-content">
    <div class="content-box team-box private-box screenwriter-box">
        <div class="con clearfix" id="script-writer-list-wrap">
            <dl th:each="item, index:${scriptwriters.list}">
                <div>
                    <dt>
                        <a th:href="@{'/user/detail/' + ${item.id}}" target="_blank">
                            <img th:src="${#request.getAttribute('uploadServer') + item.portrait}"/>
                        </a>
                    </dt>
                    <dd>
                        <a th:href="@{'/user/detail/' + ${item.id}}" target="_blank">
                            <h3 th:attr="data-user-id=${item.id}" th:text="${item.nickname}"></h3>
                            <div class="star">
                                <em></em>
                                <em></em>
                                <em></em>
                                <em></em>
                                <em></em>
                            </div>
                            <p th:text="${item.description}"></p>
                            <p th:if="${item.description.length() < 14}">&nbsp;</p>
                        </a>
                        <div class="bottom">
                            <div th:class="${item.collectUserCollect gt 0 ? 'icon on' : 'icon'}">
                                <i class="iconfont icon-zanxinxingguanzhu operations-collect" th:attr="data-collect-id=${item.id}" data-collect-type="1" data-collect-operation="2"></i>
                                <span th:text="${item.collectCount}"></span>
                            </div>
                            <div th:class="${item.collectUserLike gt 0 ? 'icon on' : 'icon'}">
                                <i class="iconfont icon-dianzan operations-collect" th:attr="data-collect-id=${item.id}" data-collect-type="1" data-collect-operation="1"></i>
                                <span th:text="${item.likeCount}"></span>
                            </div>
                            <div class="xuanze">
                                <i></i>
                            </div>
                        </div>
                    </dd>
                </div>
            </dl>

        </div>

        <!--分页-->
        <div class="pagewrap">
            <div id="script-writer-page-wrap">

            </div>
        </div>
    </div>
</div>


<!--选中导演和编剧-->
<div class="private-bottom-nav clearfix">
    <div class="left">
        <div class="name">
            <p>导演：<span class="director">请选择</span></p>
            <p>编剧：<span class="screenwriter">请选择</span></p>
        </div>
    </div>
    <div class="right">
        <a href="javascript:void(0)" id="order-btn">订购</a>
    </div>
</div>

<div th:replace="m/foot :: foot"></div>

</body>

<div th:replace="m/foot :: footer('')"></div>

<script type="text/javascript" th:src="@{'/static/common/jquery.pagination/jquery.pagination.js?v=0.1'}"></script>
<script type="text/javascript" th:src="@{'/static/m/js/operations.js?v=0.1'}"></script>

<script type="text/javascript">
    $('.head-nav li[data-item="custom"]').addClass('on');

    function bindPhotographer() {
        var privateXuanze = 1;
        // 私人订制订购摄影师
        $('.director-box .con .xuanze i').click(function () {
            var name = $(this).parent('.xuanze').parent('.bottom').siblings('a').find('h3').text();
            var id = $(this).parent('.xuanze').parent('.bottom').siblings('a').find('h3').attr('data-user-id');
            $('.private-bottom-nav .left .name .director').text(name);
            $('.private-bottom-nav .left .name .director').attr('data-user-id', id);
            $('.private-bottom-nav').slideDown();

            privateXuanze++;
            if (privateXuanze % 2 == 0) {
                $(this).addClass('on').parent('.xuanze').parent('.bottom').parent('dd').parent('div').parent('dl').siblings('dl').find('div').find('dd').find('.bottom').find('.xuanze').find('i').removeClass('on');
            }
            else {
                $(this).removeClass('on');
                if (privateXuanze % 2 == 1) {
                    $(this).parent('.xuanze').parent('.bottom').parent('dd').parent('div').parent('dl').siblings('dl').find('div').find('dd').find('.bottom').find('.xuanze').find('i').removeClass('on');
                    $('.private-bottom-nav .left .name .director').text('请选择');
                    $('.private-bottom-nav .left .name .director').attr('data-user-id', '');
                }
            }
        });
    }

    function load(type, page, targetWrap, city) {
        $.ajax({
            type: 'get',
            url: ctx + '/user/api/list',
            data: {
                type: type,
                address: city,
                pageNum: page,
                pageSize: 6,
            },
            dataType: 'json',
            success: function (result) {
                if (result.status == 200) {
                    var html = '';
                    for (var i in result.data.list) {
                        var item = result.data.list[i];
                        html += '<dl><div>\n' +
                            '            <a href="javascript:;">\n' +
                            '                <dt>\n' +
                            '                    <a th:href="@{\'/user/detail/\' + ${item.id}}" target="_blank">\n' +
                            '                       <img src="' + uploadServer + item.portrait + '"/>\n' +
                            '                    </a>\n' +
                            '                </dt>\n' +
                            '                <dd>\n' +
                            '                    <a th:href="@{\'/user/detail/\' + ${item.id}}" target="_blank">\n' +
                            '                       <h3 data-user-id="' + item.id + '">' + item.nickname + '</h3>\n' +
                            '                       <div class="star">\n' +
                            '                           <em></em>\n' +
                            '                           <em></em>\n' +
                            '                           <em></em>\n' +
                            '                           <em></em>\n' +
                            '                           <em></em>\n' +
                            '                       </div>\n' +
                            '                       <p>' + item.description + '</p>\n' + (item.description.length < 14 ? '<p>&nbsp;</p>' : '') +
                            '                    </a>\n' +
                            '                    <div class="bottom">\n' +
                            '                        <div class="icon ' + (item.collectUserCollect > 0 ? 'on' : '') + '">\n' +
                            '                            <i class="iconfont icon-zanxinxingguanzhu operations-collect" data-collect-id="' + item.id + '" data-collect-type="1" data-collect-operation="2"></i>\n' +
                            '                            <span>' + item.collectCount + '</span>\n' +
                            '                        </div>\n' +
                            '                        <div class="icon ' + (item.collectUserLike > 0 ? 'on' : '') + '">\n' +
                            '                            <i class="iconfont icon-dianzan operations-collect" data-collect-id="' + item.id + '" data-collect-type="1" data-collect-operation="1"></i>\n' +
                            '                            <span>' + item.likeCount + '</span>\n' +
                            '                        </div>\n' +
                            '                        <div class="xuanze">\n' +
                            '                            <i></i>\n' +
                            '                        </div>\n' +
                            '                    </div>\n' +
                            '                </dd>\n' +
                            '            </a>\n' +
                            '    </div></dl>';
                    }
                    $(targetWrap).html('');
                    $(targetWrap).append(html);

                    if (type == 4) {
                        bindPhotographer();
                        $('#photo-grapher-page-wrap').pagination({
                            totalData: result.data.total,
                            showData: result.data.pageSize,
                            current: result.data.pageNum,
                            pageCount: result.data.pages,
                            coping: true,
                            keepShowPN: true,
                            callback: function (index) {
                                $('html,body').animate({
                                    scrollTop: $('.private-navwrap').offset().top
                                })
                                load(type, index.getCurrent(), targetWrap, city);
                            }
                        });
                    }

                    bindCollectEvent();
                }
            }
        })
    }

    $(function () {
        // 私人订制切换导演、编剧
        $('.private-content').eq(0).show();
        $('.private-content').each(function (i) {
            $('.private-navwrap .private-nav div').eq(i).click(function () {
                $(this).addClass('on').siblings('div').removeClass('on');
                $('.private-content').eq(i).show().siblings('.private-content').hide();
            });
        });

        // 私人订制选择城市
        $('.city-choice .right .input').click(function () {
            $('.city-choice .right ul').stop().slideToggle();
        });

        $('.city-choice .right li').click(function () {
            var text = $(this).text();
            var value = $(this).val();
            $('.city-choice .right .input em').text(text);
            $('.city-choice .right ul').stop().slideUp();
            load(4, 0, '#photo-grapher-list-wrap', value);
        });

        bindPhotographer();

        var privateXuanze = 1;
        // 私人订制订购编剧
        $('.screenwriter-box .con .xuanze i').click(function () {
            var name = $(this).parent('.xuanze').parent('.bottom').siblings('a').find('h3').text();
            var id = $(this).parent('.xuanze').parent('.bottom').siblings('a').find('h3').attr('data-user-id');
            $('.private-bottom-nav .left .name .screenwriter').text(name);
            $('.private-bottom-nav .left .name .screenwriter').attr('data-user-id', id);
            $('.private-bottom-nav').slideDown();

            privateXuanze++;
            if (privateXuanze % 2 == 0) {
                $(this).addClass('on').parent('.xuanze').parent('.bottom').parent('dd').parent('div').parent('dl').siblings('dl').find('div').find('dd').find('.bottom').find('.xuanze').find('i').removeClass('on');
            }
            else {
                $(this).removeClass('on');
                if (privateXuanze % 2 == 1) {
                    $(this).parent('.xuanze').parent('.bottom').parent('dd').parent('div').parent('dl').siblings('dl').find('div').find('dd').find('.bottom').find('.xuanze').find('i').removeClass('on');
                    $('.private-bottom-nav .left .name .screenwriter').text('请选择');
                    $('.private-bottom-nav .left .name .screenwriter').attr('data-user-id', '');
                }
            }
        });

        // 私人订制选择选择导演编剧之后
        var privateNavOn = 1;
        $('.private-bottom-nav .left i').click(function () {
            privateNavOn++;
            if (privateNavOn % 2 == 0) {
                $(this).addClass('on');
            }
            else {
                $(this).removeClass('on');
            }
        });

        // 订购
        $('#order-btn').click(function () {
            var photographer = $(this).parent().siblings('.left').find('.director').attr('data-user-id');
            var scriptwriter = $(this).parent().siblings('.left').find('.screenwriter').attr('data-user-id');
            if (!photographer) {
                alert('请选择摄影师');
                return false;
            }
            if (!scriptwriter) {
                alert('请选择编剧');
                return false;
            }
            window.open('/order/ready/2?photoGrapher=' + photographer + '&scriptWriter=' + scriptwriter, '_blank');
        })

        // 摄影师翻页
        $('#photo-grapher-page-wrap').pagination({
            totalData: [[${photographers.total}]],
            showData: [[${photographers.pageSize}]],
            current: [[${photographers.pageNum}]],
            pageCount: [[${photographers.pages}]],
            coping: true,
            keepShowPN: true,
            callback: function (index) {
                $('html,body').animate({
                    scrollTop: $('.private-navwrap').offset().top
                });
                load(4, index.getCurrent(), '#photo-grapher-list-wrap');
            }
        });

        // 编剧翻页
        $('#script-writer-page-wrap').pagination({
            totalData: [[${scriptwriters.total}]],
            showData: [[${scriptwriters.pageSize}]],
            current: [[${scriptwriters.pageNum}]],
            pageCount: [[${scriptwriters.pages}]],
            coping: true,
            keepShowPN: true,
            callback: function (index) {
                $('html,body').animate({
                    scrollTop: $('.private-navwrap').offset().top
                });
                load(5, index.getCurrent(), '#script-writer-list-wrap');
            }
        });
    })
</script>
</html>

